/**
 * 配置路由规则:
 * 1. 准备一个数组：[{path:'地址', element:组件}, ...] => 导出
 * 2. 在App.jsx中使用：const 路由规则配置元素 = useRoutes(路由规则数组)
 * 3. 在App.jsx中使用：{路由规则配置元素} 渲染路由规则元素
 * 4. 在index.js入口：使用BrowserRouter/HashRouter包裹App根组件
 */
import { lazy } from 'react'
// 导入拦截组件
import Auth from '@/components/auth'
//  语法：const 组件名 = lazy(()=>import('组件路径'))
// == 普通方式 ==
// import Layout from '@/pages/layout'
// import Login from '@/pages/login'
// import NotFound from '@/pages/404'
// import Test from '@/pages/test'
// == 懒加载 ==
const Layout = lazy(() => import('@/pages/layout'))
const Login = lazy(() => import('@/pages/login'))
const NotFound = lazy(() => import('@/pages/404'))
const Test = lazy(() => import('@/pages/test'))

// 导入子页面
const Home = lazy(() => import('@/pages/home'))
const Article = lazy(() => import('@/pages/article'))
const Publish = lazy(() => import('@/pages/publish'))




const routes = [
  // 公共布局页面
  {
    path: '/',
    // element: <Layout />
    element: <Auth element={<Layout />} />,
    children: [
      {
        path: '/',
        element: <Home />
      },
      {
        path: '/article',
        element: <Article />
      },
      // path地址：/publish/* 1. 普通路由 2. 动态路由
      {
        path: '/publish/*',
        element: <Publish />
      },
    ]
  },
  // 登录
  {
    path: '/login',
    element: <Login />
  },
  {
    path: '/test',
    element: <Test />
  },
  // 404 => * 匹配所有不存在的path地址
  {
    path: '*',
    element: <NotFound />
  }
]

export default routes

